<template>
<div class="peer-empty">
  <div class="peer-empty-content">
    <div>Join a public group or create your own to share your data and know exactly where you stand among your peers.</div>
    <div class="peer-empty-btn">
      <el-button plain size="small" @click="openCreateGroup">Create new group</el-button>
      <el-button plain size="small" @click="publicGroup">Join public group</el-button>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'peerGroupEmpty',
  methods: {
    openCreateGroup () {
      this.$emit('openCreateGroup')
    },
    publicGroup () {
      this.$emit('publicGroup')
    }
  }
}
</script>

<style scoped lang="scss">
.peer-empty{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70%;
  &-content {
    height: 240px;
    width: 656px;
    background-size: 240px 240px;
    background: url("../../../../../assets/peerEmpty.png") no-repeat left center;
    padding-left: 304px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-size: 18px;
    color: #000000;
    line-height: 24px;
  }
  &-btn{
    margin-top: 40px;
  }
}
</style>
